<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>tttt</title>
    <style type="text/css">
        body{
            -webkit-perspective:700;
        }
        .abc{
            background: #000;border: 1px solid #faebd7; width: 245px;height: 200px;
            -webkit-perspective: 1000;
            overflow: hidden;



        }
        .abc img{
            position: absolute;
            -webkit-transition:all 1s;
            -webkit-transform-origin:left center;
            -webkit-backface-visibility: hidden ;

            -webkit-transform: translate3d(0px,0px,0px)    rotateY(180deg) ;
         }
        .abc .ac{
            -webkit-transform: translate3d(0px,0px,1px)   rotateY(0deg);
         }
        .abc .act{
            -webkit-transform: translate3d(0px,0px,1px)   rotateY(360deg);
         }


    </style>
</head>
<body>
<div class="abc">
    <img class="f ac" src="http://i10.topit.me/m065/1006592437048a02af.jpg" alt="">
    <img class="f" src="http://id.topit.me/d/9d/32/111864440325d329ddm.jpg" alt="">
</div>
<a href="#" >去</a>
<a href="#" >回</a>

<script type="text/javascript">
     var a=document.getElementsByTagName('a');
     var abc=document.querySelector('.abc');
     var img=document.querySelectorAll('img');
         a[0].onclick=function(){
            img[0].className='f ';
            img[1].className='f act';
        }
        a[1].onclick=function(){
            img[0].className='f ac';
            img[1].className='f ';
        }

</script>
</body>
</html>